<script type="text/javascript">
	$(function(){
		var chartDataUrl = "../cockpitPartThree/priceIndicesChartdata";
		var chartDiv1 = "priceIndices1";
		var chartDiv2 = "priceIndices2";
		var chartDiv3 = "priceIndices3";
		$.get(chartDataUrl,function(ret){
			var data = JSON.parse(ret);
			
			new echartsPersonal(chartDiv1,data,createChart4First).loadChart(demoOption);
			new echartsPersonal(chartDiv2,data,createChart4Second).loadChart(demoOption);
			new echartsPersonal(chartDiv3,data,createChart4Third).loadChart(demoOption);
		})
		
	})
	//示例Option，取自http://gallery.echartsjs.com/editor.html?c=xr1Y7XQOkZ
	var demoOption = {
		//backgroundColor : '#394056',
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				lineStyle : {
					color : '#F1F1F3'
				}
			}
		},
		legend : {
			icon : 'rect',
			itemWidth : 14,
			itemHeight : 5,
			itemGap : 13,
			data : [ '移动', '电信', '联通' ],
			right : '4%',
			textStyle : {
				fontSize : 12,
				color : '#F1F1F3'
			}
		},
		grid : {
			top:'10px',
			left : '3%',
			right : '4%',
			bottom : '-1px',
			containLabel : true
		},
		xAxis : [ {
			type : 'category',
			//boundaryGap: false,
			axisLine : {
				lineStyle : {
					color : '#57617B'
				}
			},
			data : [ '13:00', '13:05', '13:10', '13:15', '13:20', '13:25',
					'13:30', '13:35', '13:40', '13:45', '13:50', '13:55' ]
		} ],
		yAxis : [ {
			type : 'value',
			name : '单位（吨/元）',
			splitNumber : 1,
			scale : true,
			axisTick : {
				show : false
			},
			axisLine : {
				show : false,
				lineStyle : {
					color : '#57617B'
				}
			},
			axisLabel : {
				margin : 10,
				textStyle : {
					fontSize : 14
				}
			},
			splitLine : {
				lineStyle : {
					color : '#57617B'
				}
			}
		} ],
		series : [
				{
					name : '移动',
					type : 'line',
					smooth : true,
					symbol : 'circle',
					symbolSize : 5,
					showSymbol : false,
					lineStyle : {
						normal : {
							width : 1
						}
					},
					areaStyle : {
						normal : {
							color : new echarts.graphic.LinearGradient(0, 0, 0,
									1, [ {
										offset : 0,
										color : 'rgba(137, 189, 27, 0.3)'
									}, {
										offset : 0.8,
										color : 'rgba(137, 189, 27, 0)'
									} ], false),
							shadowColor : 'rgba(0, 0, 0, 0.1)',
						//shadowBlur: 10
						}
					},
					itemStyle : {
						normal : {
							color : 'rgb(137,189,27)',
							borderColor : 'rgba(137,189,2,0.27)',
							borderWidth : 12

						}
					},
					data : [ 220, 182, 191, 134, 150, 120, 110, 125, 145, 122,
							165, 122 ]
				},
				{
					name : '电信',
					type : 'line',
					smooth : true,
					symbol : 'circle',
					symbolSize : 5,
					showSymbol : false,
					lineStyle : {
						normal : {
							width : 1
						}
					},
					areaStyle : {
						normal : {
							color : new echarts.graphic.LinearGradient(0, 0, 0,
									1, [ {
										offset : 0,
										color : 'rgba(0, 136, 212, 0.3)'
									}, {
										offset : 0.8,
										color : 'rgba(0, 136, 212, 0)'
									} ], false),
							shadowColor : 'rgba(0, 0, 0, 0.1)',
						//shadowBlur: 10
						}
					},
					itemStyle : {
						normal : {
							color : 'rgb(0,136,212)',
							borderColor : 'rgba(0,136,212,0.2)',
							borderWidth : 12

						}
					},
					data : [ 120, 110, 125, 145, 122, 165, 122, 220, 182, 191,
							134, 150 ]
				},
				{
					name : '联通',
					type : 'line',
					smooth : true,
					symbol : 'circle',
					symbolSize : 5,
					showSymbol : false,
					lineStyle : {
						normal : {
							width : 1
						}
					},
					areaStyle : {
						normal : {
							color : new echarts.graphic.LinearGradient(0, 0, 0,
									1, [ {
										offset : 0,
										color : 'rgba(219, 50, 51, 0.3)'
									}, {
										offset : 0.8,
										color : 'rgba(219, 50, 51, 0)'
									} ], false),
							shadowColor : 'rgba(0, 0, 0, 0.1)',
						//shadowBlur: 10
						}
					},
					itemStyle : {
						normal : {

							color : 'rgb(219,50,51)',
							borderColor : 'rgba(219,50,51,0.2)',
							borderWidth : 12
						}
					},
					data : [ 220, 182, 125, 145, 122, 191, 134, 150, 120, 110,
							165, 122 ]
				}, ]
	};

	var priceIndicesLength = 30;

	//整理数据顺序、截取数据长度
	function reverseAndTrimDataLength(data) {
		var ret = data.slice(0, priceIndicesLength);
		ret.reverse();
		return ret;
	}

	//环渤海动力煤价格指数
	function createChart4First(data) {
		var dateList = reverseAndTrimDataLength(data["huanBH"]["dateList"]);
		var priceIndicesList = reverseAndTrimDataLength(data["huanBH"]["priceIndicesList"]);
		var modifyOption = {
			legend : {
				show : false
			},
			xAxis : [ {
				data : dateList
			} ],
			yAxis : [ {
				name : '',
			} ],
			series : [ {
				name : '环渤海动力煤价格指数',
				areaStyle : {
					normal : {
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[ {
									offset : 0,
									color : 'rgba(219, 50, 51, 0.3)'
								}, {
									offset : 0.8,
									color : 'rgba(219, 50, 51, 0)'
								} ], false),
						shadowColor : 'rgba(0, 0, 0, 0.1)',
					}
				},
				itemStyle : {
					normal : {

						color : 'rgb(219,50,51)',
						borderColor : 'rgba(219,50,51,0.2)',
						borderWidth : 12
					}
				},
				data : priceIndicesList
			} ]
		};
		return modifyOption;
	}
	//太原煤炭价格指数V2.0
	function createChart4Second(data) {
		var dateList = reverseAndTrimDataLength(data["taiY"]["dateList"]);
		var priceIndicesList = reverseAndTrimDataLength(data["taiY"]["priceIndicesList"]);
		var modifyOption = {
			legend : {
				show : false
			},
			xAxis : [ {
				data : dateList
			} ],
			yAxis : [ {
				name : '',
			} ],
			series : [ {
				name : '太原煤炭价格指数V2.0',
				areaStyle : {
					normal : {
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[ {
									offset : 0,
									color : 'rgba(0, 136, 212, 0.3)'
								}, {
									offset : 0.8,
									color : 'rgba(0, 136, 212, 0)'
								} ], false),
						shadowColor : 'rgba(0, 0, 0, 0.1)',
					}
				},
				itemStyle : {
					normal : {
						color : 'rgb(0,136,212)',
						borderColor : 'rgba(0,136,212,0.2)',
						borderWidth : 12

					}
				},
				data : priceIndicesList
			} ]
		};
		return modifyOption;
	}

	//国外三家
	function createChart4Third(data) {
		var dateList = reverseAndTrimDataLength(data["ouZSG"]["dateList"]);
		var priceIndicesList1 = reverseAndTrimDataLength(data["ouZSG"]["priceIndicesList"]);
		var priceIndicesList2 = reverseAndTrimDataLength(data["niuKSE"]["priceIndicesList"]);
		var priceIndicesList3 = reverseAndTrimDataLength(data["liCDW"]["priceIndicesList"]);
		var modifyOption = {
			legend : {
				show : false,
				data : [ '欧洲三港动力煤价格', '纽卡斯尔动力煤价格', '理查德湾动力煤价格' ],
				right : '4%',
				textStyle : {
					fontSize : 8,
					color : 'rgb(219,50,51)'
				}
			},
			xAxis : [ {
				data : dateList
			} ],
			yAxis : [ {
				name : '',
			} ],
			series : [
					{
						name : '欧洲三港动力煤价格',
						areaStyle : {
							normal : {
								color : new echarts.graphic.LinearGradient(0,
										0, 0, 1, [ {
											offset : 0,
											color : 'rgba(137, 189, 27, 0.3)'
										}, {
											offset : 0.8,
											color : 'rgba(137, 189, 27, 0)'
										} ], false),
								shadowColor : 'rgba(0, 0, 0, 0.1)',
							}
						},
						itemStyle : {
							normal : {
								color : 'rgb(137,189,27)',
								borderColor : 'rgba(137,189,2,0.27)',
								borderWidth : 12

							}
						},
						data : priceIndicesList1
					},
					{
						name : '纽卡斯尔动力煤价格',
						areaStyle : {
							normal : {
								color : new echarts.graphic.LinearGradient(0,
										0, 0, 1, [ {
											offset : 0,
											color : 'rgba(0, 136, 212, 0.3)'
										}, {
											offset : 0.8,
											color : 'rgba(0, 136, 212, 0)'
										} ], false),
								shadowColor : 'rgba(0, 0, 0, 0.1)',
							}
						},
						itemStyle : {
							normal : {
								color : 'rgb(0,136,212)',
								borderColor : 'rgba(0,136,212,0.2)',
								borderWidth : 12

							}
						},
						data : priceIndicesList2
					},
					{
						name : '理查德湾动力煤价格',
						areaStyle : {
							normal : {
								color : new echarts.graphic.LinearGradient(0,
										0, 0, 1, [ {
											offset : 0,
											color : 'rgba(219, 50, 51, 0.3)'
										}, {
											offset : 0.8,
											color : 'rgba(219, 50, 51, 0)'
										} ], false),
								shadowColor : 'rgba(0, 0, 0, 0.1)',
							}
						},
						itemStyle : {
							normal : {

								color : 'rgb(219,50,51)',
								borderColor : 'rgba(219,50,51,0.2)',
								borderWidth : 12
							}
						},
						data : priceIndicesList3
					}, ]
		};
		return modifyOption;
	}
</script>
<!-- 

<div comment="价格指数" style="overflow:auto;">
	<div id="priceIndices1" style="width: 900px; height: 300px; margin-top:15px">

	</div>
	<div id="priceIndices2" style="width: 900px; height: 300px; margin-top:15px">

	</div>
	<div id="priceIndices3" style="width: 900px; height: 300px; margin-top:15px">

	</div>

</div>
 -->